<template>
	<view class="container"> 
		<page-nav class="custom-title" title="产品详情" :leftShow="true"> </page-nav>	
			 
			 
		<view hover-class="none" class="news-item">
			<view>									
				<image :src="article.photo!==''?article.photo:defaultImage" class="img" />
				<view class="lab" > {{article.shot}}</view>
			</view> 
			<view class="left">
				<view class="info">
					{{article.title}}
				</view>
				<view class="atag">
					<span style="color: #FA612C; background-color: #FA612C33;  font-weight: 500;  padding: 0rpx 10rpx 0rpx 10rpx; margin-right: 10rpx;">{{article.repaymentStr}}</span>										
					<span style="color: #1057FC;  padding: 0rpx 10rpx 0rpx 10rpx; font-weight: 500; background-color: #1057FC33;">{{article.loanTypeStr}}</span>
					 
				</view>
				<view class="date">										 
						<view style="text-align: center;">
							<view  class="lab" >{{ article.interestRate}}% </view>	 
							<view style="white-space: nowrap;">融资利率</view>	   
						</view>
						<view style="text-align: center;">
							<view class="lab" >{{ article.financingPeriodStr}}</view>	 
							<view style="white-space: nowrap;">融资期限</view>	   
						</view style="text-align: center;">
						<view style="text-align: center;">
							<view class="lab" >{{ article.financingLimitStr}}</view>	 
							<view style="white-space: nowrap;">融资额度</view>	   
						</view> 					 
				</view>
			</view>		 
		</view>
		
		<view class="detail">
			<view class="table" style="font-weight: bold;">产品介绍</view>
			<view  class="table"> 	<u-parse   :content="article.introduction"></u-parse>  </view>
		 
			<view  class="table" style="font-weight: bold;">适用客户</view>	
			<view  class="table"> 	<u-parse   :content="article.customers"></u-parse>  </view>
			 
			<view  class="table" style="font-weight: bold;">产品特色</view> 
			<view  class="table"> 	<u-parse   :content="article.features"></u-parse>  </view>
			 
			<view  class="table" style="font-weight: bold;">申请条件</view> 
			<view  class="table"> 	<u-parse   :content="article.conditions"></u-parse>  </view>
			 
			<view  class="table" style="font-weight: bold;">申请条件</view> 
			<view  class="table"> 	<u-parse   :content="article.reviewMaterials"></u-parse>  </view>
			  
		</view>	 
		 
	</view>
</template>


<script>
	import {
		rzproductDetail
	} from '@/api/mock/home.js'
	 
	export default {
		data() {
			return {
				article:{shot:'★'},
				defaultImage: 'https://www.xrskfw.com/static/images/home/def.png', // 默认图片地址
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数	
						
			rzproductDetail({id:option.id}).then(data =>{			 
				this.article = data.data;
				console.log("this.article",this.article);
				this.article.introduction = this.article.introduction !== undefined ? this.article.introduction.replaceAll('\n', "<br/>") : '';
				this.article.customers = this.article.customers !== undefined ? this.article.customers.replaceAll('\n', "<br/>") : '';
				this.article.features = this.article.features !== undefined ? this.article.features.replaceAll('\n', "<br/>") : '';
				this.article.conditions = this.article.conditions !== undefined ? this.article.conditions.replaceAll('\n', "<br/>") : '';
				this.article.reviewMaterials = this.article.reviewMaterials !== undefined ? this.article.reviewMaterials.replaceAll('\n', "<br/>") : '';
				this.article.scoped = this.article.scoped !== undefined ? this.article.scoped.replaceAll('\n', "<br/>") : '';
		//利率范围             
				//还款方式        
				//产品热度
				switch (this.article.hot) {
					case '1':
						this.article.shot="★"
						break;
					case '2':
						this.article.shot="★★"
						break;
					case '3':
						this.article.shot="★★★"
						break;
					case '4':
						this.article.shot="★★★★"
						break;
					case '5':
						this.article.shot="★★★★★"
						break;
				}
				                 
			})
		} 
	};
</script>

<style lang="scss" scoped>
.table{
	&:not(:last-of-type) {	  
		border-bottom: 1px solid #eeeeee;
	}
	//margin: 0rpx 30rpx 0rpx 30rpx;
	border: 1px solid #a6abb5;
	padding: 10rpx 10rpx;
}
 .detail {
 	font-size: 26rpx;
 	font-family: PingFang SC;
 	font-weight: 500;
 	color: #000000;
 	line-height: 47rpx;
 	margin-top: 20rpx;
 	padding: 30rpx 30rpx;
 }
	 
.news-item { 
	.lab{
		color:#FA612C; 
		font-weight: bold;   
		white-space: nowrap;
		text-align: center;
	} 
	padding: 0rpx 30rpx 0rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between; 
	.left {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;	 
		.atag{
			font-size: 28rpx;
			line-height: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #212121;
		 }
		.info {
			min-width: 0;
			padding-right: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #212121;
			line-height: 36rpx;
		}

		.date {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20rpx;
		 
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #a6abb5;
		}
	}

	.img {
		flex-shrink: 0;
		width: 252rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: #dddddd; 
		margin-right: 20rpx;
	}
}
  
</style>
